<template>
  <div>
    <n-grid class="n-layout-page-header mt-4" cols="1 m:1" rows="2"
            responsive="screen" :x-gap="12" :y-gap="9">
      <n-gi>
        <n-card
          class="pb-4"
          :segmented="{ content: true }"
          content-style="padding: 0;"
          :bordered="false"
          size="small"
          title="快捷操作"
        >
          <div class="flex flex-wrap project-card mt-0.5">
            <n-card v-permission="{action: ['menu_list']}" size="small"
                    class="cursor-pointer project-card-item" :bordered="false">
              <router-link to="/system/menu" tag="div"
                           class="flex flex-col justify-center text-gray-500">
                    <span class="text-center">
                      <n-icon size="30" color="#fab251">
                        <ProfileOutlined/>
                      </n-icon>
                    </span>
                <span class="text-center text-lx">菜单管理</span>
              </router-link>
            </n-card>
            <n-card v-permission="{action: ['role_list']}" size="small"
                    class="cursor-pointer project-card-item" :bordered="false">
              <router-link to="/system/role" tag="div"
                           class="flex flex-col justify-center text-gray-500">
                    <span class="text-center">
                      <n-icon size="30" color="#1890ff">
                        <FileProtectOutlined/>
                      </n-icon>
                    </span>
                <span class="text-center text-lx">角色管理</span>
              </router-link>
            </n-card>
            <n-card v-permission="{action: ['user_list']}" size="small"
                    class="cursor-pointer project-card-item" :bordered="false">
              <router-link to="/system/user" tag="div"
                           class="flex flex-col justify-center text-gray-500">
                    <span class="text-center">
                      <n-icon size="30" color="#f06b96">
                        <ApartmentOutlined/>
                      </n-icon>
                    </span>
                <span class="text-center text-lx">人员管理</span>
              </router-link>
            </n-card>
            <n-card v-permission="{action: ['history_list']}" size="small"
                    class="cursor-pointer project-card-item" :bordered="false">
              <router-link to="/chat/history" tag="div"
                           class="flex flex-col justify-center text-gray-500">
                    <span class="text-center">
                      <n-icon size="30" color="#7238d1">
                        <WechatOutlined/>
                      </n-icon>
                    </span>
                <span class="text-center text-lx">历史会话</span>
              </router-link>
            </n-card>
            <n-card v-permission="{action: ['refer_list']}" size="small"
                    class="cursor-pointer project-card-item" :bordered="false">
              <router-link to="/chat/refer" tag="div"
                           class="flex flex-col justify-center text-gray-500">
                    <span class="text-center">
                      <n-icon size="30" color="#3866d1">
                        <RecommendOutlined/>
                      </n-icon>
                    </span>
                <span class="text-center text-lx">推荐管理</span>
              </router-link>
            </n-card>
            <n-card v-permission="{action: ['usage_list']}" size="small"
                    class="cursor-pointer project-card-item" :bordered="false">
              <router-link to="/statistic/usage" tag="div"
                           class="flex flex-col justify-center text-gray-500">
                    <span class="text-center">
                      <n-icon size="30" color="#d13838">
                        <SettingOutlined/>
                      </n-icon>
                    </span>
                <span class="text-center text-lx">使用统计</span>
              </router-link>
            </n-card>
            <n-card v-permission="{action: ['log_list']}" size="small"
                    class="cursor-pointer project-card-item" :bordered="false">
              <router-link to="/statistic/log" tag="div"
                           class="flex flex-col justify-center text-gray-500">
                    <span class="text-center">
                      <n-icon size="30" color="#38b3d1">
                        <FileSearchOutlined/>
                      </n-icon>
                    </span>
                <span class="text-center text-lx">日志管理</span>
              </router-link>
            </n-card>
            <n-card v-permission="{action: ['audit_list']}" size="small"
                    class="cursor-pointer project-card-item" :bordered="false">
              <router-link to="/statistic/audit" tag="div"
                           class="flex flex-col justify-center text-gray-500">
                    <span class="text-center">
                      <n-icon size="30" color="#7238d1">
                        <AuditOutlined/>
                      </n-icon>
                    </span>
                <span class="text-center text-lx">审计管理</span>
              </router-link>
            </n-card>
          </div>
        </n-card>
      </n-gi>
      <n-gi>
        <n-grid cols="2 s:1 m:1 l:2 xl:2 2xl:2" rows="1" responsive="screen" :x-gap="12" :y-gap="9">
          <n-gi>
            <n-card
              class="overflow-auto"
              style="height: 550px"
              :segmented="{ content: true }"
              content-style="padding-top: 0;padding-bottom: 0;"
              :bordered="false"
              size="small"
              title="审计动态"
            >
              <template #header-extra>
                <router-link v-permission="{action: ['audit_list']}" to="/statistic/audit" tag="a">
                  查看更多
                </router-link>
              </template>
              <n-list v-if="hasPermission(['audit_list'])">
                <n-list-item v-if="auditList && auditList.length > 0" v-for="audit in auditList"
                             :key="audit.id">
                  <n-thing :title="`${audit.dept} 的 ${audit.name} ${audit.type} ${audit.info}`">
                    <template #description>
                      <p class="text-xs text-gray-500">{{ audit.create_time }}</p>
                    </template>
                  </n-thing>
                </n-list-item>
                <n-space v-else vertical>
                  <n-skeleton v-for="item in range(6)" :key="item" class="mt-1 h-16 mb-1"
                              width="100%" :sharp="false"/>
                </n-space>
              </n-list>
              <n-empty v-else description="你没有权限"
                       class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                <template #extra>
                  <n-button size="small">
                    看看别的吧
                  </n-button>
                </template>
              </n-empty>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card
              class="overflow-auto"
              style="height: 550px"
              :segmented="{ content: true }"
              content-style="padding-top: 0;padding-bottom: 0;"
              :bordered="false"
              size="small"
              title="日志动态"
            >
              <template #header-extra>
                <router-link v-permission="{action: ['log_list']}" to="/statistic/log" tag="a">
                  查看更多
                </router-link>
              </template>
              <n-list v-if="hasPermission(['log_list'])">
                <n-list-item v-if="logList && logList.length > 0" v-for="log in logList"
                             :key="log.id">
                  <n-thing :title="`${log.dept} 的 ${log.name} 进行了操作 ${log.log_info}`">
                    <template #description>
                      <p class="text-xs text-gray-500">{{ log.create_time }}</p>
                    </template>
                  </n-thing>
                </n-list-item>
                <n-space v-else vertical>
                  <n-skeleton v-for="item in range(6)" :key="item" class="mt-1 h-16 mb-1"
                              width="100%" :sharp="false"/>
                </n-space>
              </n-list>
              <n-empty v-else description="你没有权限"
                       class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                <template #extra>
                  <n-button size="small">
                    看看别的吧
                  </n-button>
                </template>
              </n-empty>
            </n-card>
          </n-gi>
        </n-grid>
      </n-gi>
    </n-grid>
  </div>
</template>

<script lang="ts">
import {UserInfoType, useUserStore} from '@/store/modules/user';
import {ref} from "vue";
import {getLogList} from "@/api/statistic/log";
import {getAuditList} from "@/api/statistic/audit";
import {usePermission} from '@/hooks/web/usePermission';
import {range} from '@/utils/util';

const userStore = useUserStore();
const userInfo: UserInfoType = userStore.info
const logList = ref([])
const auditList = ref([])
const {hasPermission} = usePermission();

export default {
  name: 'DashboardWorkplace',
  async mounted() {
    if (hasPermission(['log_list'])) {
      getLogList({
        pageNo: 1,
        pageSize: 7,
      }).then(res => {
        logList.value = res.data.list;
      })
    }

    if (hasPermission(['audit_list'])) {
      getAuditList({
        pageNo: 1,
        pageSize: 7,
      }).then(res => {
        auditList.value = res.data.list;
      })
    }
  },
  data() {
    return {
      userInfo: userInfo,
      hasPermission,
      logList,
      auditList,
    };
  }
};
</script>

<script lang="ts" setup>
import {
  DashboardOutlined,
  ProfileOutlined,
  FileProtectOutlined,
  SettingOutlined,
  WechatOutlined,
  FileSearchOutlined,
  AuditOutlined,
  ApartmentOutlined,
} from '@vicons/antd';
import {
  RecommendOutlined
} from '@vicons/material';
</script>

<style lang="less" scoped>
.project-card {
  margin-right: -6px;

  &-item {
    margin: -1px;
    width: 20%;
  }
}
</style>
